Visualizing the simplest, most fundamental code units.
The **`this`** keyword refers to the value of the current execution context. Its value is determined by how a function is called, not where it is defined. It is a fundamental concept for object-oriented programming in JavaScript.
const obj = {
value: 42,
showValue: function() {
console.log(this.value);
}
};
obj.showValue(); // `this` is 'obj'
Observe how `this` changes depending on the calling context.
Global Context: `console.log(this)`
Object Method: `person.greet()`
**Literals** are fixed values that you, the programmer, provide in the script. They are expressions that evaluate to themselves. This includes arrays (`[]`), objects (`{}`), regular expressions (`/ /`), and template literals (`` ` `).**
const arr = [1, 2, 3];
const obj = { key: 'value' };
const regex = /world/g;
const temp = `Hello, ${userName}!`;
See the output of these literal expressions.
Array Literal `[1, "b", true]`:
Object Literal `{ x: 1, y: 2 }`:
Template Literal `` `Sum is ${1+2}` ``:
Unlike function or class declarations, these are expressions that can be assigned to a variable or passed as an argument. They are powerful for creating code that can be executed on demand.
const sayHello = function() { ... };
const MyClass = class { ... };
Expressions are code that resolves to a value. Here, the expression is a function or class definition.
Function Expression: `const fn = function() { return 42; };`
Class Expression: `const C = class { ... };`
Parentheses are used to group expressions, ensuring they are evaluated first. Regular expression literals provide a powerful way to define patterns for string matching.
const result = (2 + 3) * 4; // 20 const match = "abc-123".match(/\d+/g);
Observe the `( )` expression and a regex match on a string.
Expression `(1 + 2) * 5`:
Regex `/b(a)n/` on "banana":